<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面布局图</title>
    <link rel="stylesheet" href="layout.css">
</head>
<body>
    <div class="container">
        <!-- 顶部标题 -->
        <header class="layout-box header">
            <div class="layout-info">
                <h3>顶部标题区域 (header)</h3>
                <p>高度: 80px</p>
                <p>宽度: 100%</p>
                <p>外边距: 下 20px</p>
                <p>内容: 电商平台数据可视化大屏</p>
            </div>
            <!-- 数据来源标识 -->
            <div class="data-source-tag">
                <p>数据来源: 京东产品数据</p>
            </div>
        </header>
        
        <!-- 主内容区域 -->
        <main class="layout-box main-content">
            <!-- <div class="layout-info main-info">
                <h3>主内容区域 (main-content)</h3>
                <p>布局: flex</p>
                <p>元素间距: 15px</p>
                <p>高度: 自适应填充剩余空间</p>
            </div> -->
            
            <!-- 左侧区域 -->
            <div class="layout-box panel left-panel">
                <div class="layout-info">
                    <h3>左侧面板 (left-panel)</h3>
                    <p>宽度: 25%</p>
                    <p>布局: 纵向flex</p>
                    <p>元素间距: 15px</p>
                </div>
                
                <!-- 左上角数字卡片 -->
                <div class="layout-box card-container">
                    <div class="layout-info">
                        <h3>数据卡片容器 (card-container)</h3>
                        <p>布局: flex</p>
                        <p>元素间距: 10px</p>
                        <p>下边距: 15px</p>
                        <p>数据来源: 京东产品数据</p>
                        <p>数据分析: 汇总统计产品的关键指标</p>
                    </div>
                    
                    <div class="layout-box data-card">
                        <div class="layout-info">
                            <h3>数据卡片 (data-card)</h3>
                            <p>内边距: 15px</p>
                            <p>圆角: 8px</p>
                            <p>内容: 数据总数</p>
                        </div>
                    </div>
                    
                    <div class="layout-box data-card">
                        <div class="layout-info">
                            <h3>数据卡片 (data-card)</h3>
                            <p>内边距: 15px</p>
                            <p>圆角: 8px</p>
                            <p>内容: 平均价格</p>
                        </div>
                    </div>
                    
                    <div class="layout-box data-card">
                        <div class="layout-info">
                            <h3>数据卡片 (data-card)</h3>
                            <p>内边距: 15px</p>
                            <p>圆角: 8px</p>
                            <p>内容: 商品类型数</p>
                        </div>
                    </div>
                </div>
                
                <!-- 左中数据总览 -->
                <div class="layout-box data-overview">
                    <div class="layout-info">
                        <h3>数据总览 (data-overview)</h3>
                        <p>内容: 数据表格</p>
                        <p>高度: 自适应</p>
                        <p>内边距: 15px</p>
                        <p>数据来源: 京东产品数据</p>
                        <p>数据分析: 展示产品的详细信息，包括名称、价格和配送信息</p>
                    </div>
                    <div class="scroll-container">
                        <div class="layout-info">
                            <h3>滚动容器 (scroll-container)</h3>
                            <p>内容: 表格数据</p>
                        </div>
                    </div>
                </div>
                
                <!-- 左下省份分布玫瑰图 -->
                <div class="layout-box chart-container">
                    <div class="layout-info">
                        <h3>图表容器 (chart-container)</h3>
                        <p>内容: 省份分布环形图</p>
                        <p>高度: 300px</p>
                        <p>内边距: 15px</p>
                        <p>数据来源: 京东产品省份分布数据</p>
                        <p>数据分析: 通过环形图展示各省份产品分布情况，直观反映各地区市场占比</p>
                    </div>
                </div>
            </div>
            
            <!-- 中间区域 -->
            <div class="layout-box panel center-panel">
                <div class="layout-info">
                    <h3>中间面板 (center-panel)</h3>
                    <p>宽度: 50%</p>
                    <p>布局: 纵向flex</p>
                    <p>元素间距: 15px</p>
                </div>
                
                <!-- 中上和中中地图 -->
                <div class="layout-box map-container">
                    <div class="layout-info">
                        <h3>地图容器 (map-container)</h3>
                        <p>内容: 中国地图</p>
                        <p>高度: 450px</p>
                        <p>比例: flex 2</p>
                        <p>数据来源: 京东产品全国销售地理分布数据</p>
                        <p>数据分析: 通过地图可视化展示全国各地区产品销售热度，突出重点销售区域</p>
                    </div>
                </div>
                
                <!-- 中下全国购买总量统计 -->
                <div class="layout-box chart-container">
                    <div class="layout-info">
                        <h3>图表容器 (chart-container)</h3>
                        <p>内容: 不同省份购买量动态柱状图</p>
                        <p>高度: 300px</p>
                        <p>内边距: 15px</p>
                        <p>数据来源: 京东产品各省份购买量统计数据</p>
                        <p>数据分析: 展示各省份产品购买总量，可视化比较不同地区的消费能力和偏好</p>
                    </div>
                </div>
            </div>
            
            <!-- 右侧区域 -->
            <div class="layout-box panel right-panel">
                <div class="layout-info">
                    <h3>右侧面板 (right-panel)</h3>
                    <p>宽度: 25%</p>
                    <p>布局: 纵向flex</p>
                    <p>元素间距: 15px</p>
                </div>
                
                <!-- 右上渠道分布 -->
                <div class="layout-box card-container">
                    <div class="layout-info">
                        <h3>渠道分布 (card-container)</h3>
                        <p>内容: 渠道分布卡片</p>
                        <p>布局: flex</p>
                        <p>元素间距: 10px</p>
                        <p>数据来源: 京东产品销售渠道数据</p>
                        <p>数据分析: 显示产品在不同销售渠道的分布情况，便于渠道优化决策</p>
                    </div>
                    
                    <!-- 动态生成的卡片示例 -->
                    <div class="layout-box data-card">
                        <div class="layout-info">
                            <h3>渠道卡片</h3>
                            <p>动态生成的内容</p>
                        </div>
                    </div>
                </div>
                
                <!-- 右中价格分布 -->
                <div class="layout-box chart-container">
                    <div class="layout-info">
                        <h3>图表容器 (chart-container)</h3>
                        <p>内容: 价格分布图表</p>
                        <p>高度: 300px</p>
                        <p>内边距: 15px</p>
                        <p>数据来源: 京东产品价格区间统计数据</p>
                        <p>数据分析: 分析产品价格分布，反映市场价格段位分布和消费者价格承受能力</p>
                    </div>
                </div>
                
                <!-- 右下全国热榜 -->
                <div class="layout-box hot-list">
                    <div class="layout-info">
                        <h3>全国热榜容器 (hot-list)</h3>
                        <p>内容: 三列热门数据</p>
                        <p>高度: 自适应</p>
                        <p>内边距: 15px</p>
                        <p>数据来源: 京东产品热销排行数据</p>
                        <p>数据分析: 展示全国和各省份热门店铺排行，分析热销趋势和消费者偏好</p>
                    </div>
                    
                    <div class="layout-box hot-list-container">
                        <!-- 左侧热门店铺 -->
                        <div class="layout-box" style="flex: 1;">
                            <div class="layout-info">
                                <h3>全国店铺销售量排行top3 (hot-list-left)</h3>
                                <p>内容: 店铺名称</p>
                            </div>
                        </div>
                        
                        <!-- 中间热门省份 -->
                        <div class="layout-box" style="flex: 1;">
                            <div class="layout-info">
                                <h3>全国省份销售量排行top5名称 (hot-list-center)</h3>
                                <p>内容: 省份名称</p>
                            </div>
                        </div>
                        
                        <!-- 右侧省份热门店铺 -->
                        <div class="layout-box" style="flex: 1;">
                            <div class="layout-info">
                                <h3>该省份销售量排行top5 (hot-list-right)</h3>
                                <p>内容: 店铺名称</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
</html>
